<template>
  <div id="spu-list">
    <!--  商品筛选栏  -->
    <div class="containner">
      <div class="py-10 px-20 box-shadow rounded text-md">
        <!--  商品分类筛选栏  -->
        <div class="spu-filter-row flex item-start my-10">
          <div class="spu-filter-name gray text-right">商品分类：</div>
          <div class="spu-filter-group flex item-center wrap">
            <div class="spu-filter-item ml-10 gray hand" :class="{'active':product.spulist_filter_cate == null}"
              @click="categoryClicked(null)">全部</div>
            <!--  遍历分类  -->
            <div class="spu-filter-item ml-20 gray hand" v-for="cate of product.categoryList" :key="cate.cate_id"
              :class="{'active':product.spulist_filter_cate != null && product.spulist_filter_cate.cate_id == cate.cate_id}"
              @click="categoryClicked(cate)">
              {{cate.cate_name}}
            </div>
          </div>
        </div>
        <!--  遍历商品属性键  -->
        <template v-for="(attr,index) of product.spuAttrList">
          <div class="spu-filter-row flex item-start my-10" v-if="attr.key_issku == 0" :key="attr.key_id">
            <div class="spu-filter-name gray text-right">{{attr.key_name}}：</div>
            <div class="spu-filter-group flex item-center wrap">
              <div class="spu-filter-item ml-10 gray hand"
                :class="{'active':product.spulist_filter_valueList[index] == null }"
                @click="attr_value_clicked(index,null)">全部</div>
              <!--  遍历商品属性值  -->
              <div class="spu-filter-item ml-20 gray hand" v-for="val of attr.spuAttrValueList" :key="val.id"
                :class="{'active': product.spulist_filter_valueList[index] == val.id }"
                @click="attr_value_clicked(index,val.id)">
                {{val.value_name}}
              </div>
            </div>
          </div>
        </template>
      </div>

    </div>
    <!--  /商品筛选栏  -->

    <!--  商品Spu列表栏  -->
    <div class="containner mt-20 flex wrap item-start">
      <div v-for="spu of product.spulist.data" :key="spu.spu_id" @click="spu_clicked(spu)">
        <spu :spu="spu"></spu>
      </div>

    </div>
    <!--  /商品Spu列表栏  -->
  </div>
</template>

<script>
  // 辅助函数
  import {
    mapState,
    mapMutations,
    mapActions
  } from 'vuex'
  // Component组件
  import Spu from "@/components/Spu.vue";
  // 路由
  import router from "@/router/";

  export default {
    computed: {
      ...mapState(['website', 'product'])
    },
    methods: {
      ...mapMutations('product', ['set_spu', 'set_spulist_filter_start', 'set_categoryList',
        'set_spulist_filter_valueList', 'set_spulist_filter_cate'
      ]),
      ...mapActions('product', ['getSpuAndFilterList', 'getSpuAttrList', 'appendSpuList']),
      // 点击 属性值
      attr_value_clicked(index, value_id) {
        // 获取现有筛选属性值列表
        let arr = this.product.spulist_filter_valueList;
        // 更新属性值
        arr[index] = value_id;
        // 将更新后的属性值列表 重新 存入 state
        this.set_spulist_filter_valueList(arr);
        // 重新 调用webapi接口 获取满足条件的商品Spu列表
        this.getSpuAndFilterList();
      },
      // 点击 分类
      categoryClicked(cate) {
        // 将当前被点击的分类 设置到 state中
        this.set_spulist_filter_cate(cate);
        // 调用webapi接口 获取满足条件的商品Spu列表
        this.getSpuAndFilterList();
        // 根据 筛选分类 调用webapi接口 查询 属性列表
        this.getSpuAttrList();
        // 清空 属性列表
        this.set_spulist_filter_valueList([]);
      },
      // 点击商品Spu
      spu_clicked(spu) {
        // 将当前要显示的商品Spu存入state
        this.set_spu(spu);

        // 路由定向到 Spu
        router.push({
          path: "/spu"
        });
      }
    },
    components: {
      'spu': Spu,
    },
    mounted() {
      // 初始化参数
      this.set_spulist_filter_start(0);

      // 调用webapi接口 获取满足条件的商品Spu列表
      this.getSpuAndFilterList();
      // 判断 是否有 筛选分类
      if (this.product.spulist_filter_cate != null) {
        // 有 筛选分类
        // 设置 商品分类列表
        this.set_categoryList([this.product.spulist_filter_cate]);
        // 根据 筛选分类 调用webapi接口 查询 属性列表
        this.getSpuAttrList();
      }
      // 添加BOM事件 监听窗体滚动
      let that = this;
      window.onscroll = () => {
        // 判断 页面是否滚动到了底部
        if (document.documentElement.scrollTop + window.innerHeight >= document.documentElement.offsetHeight) {
          // 设置查询的起始索引
          that.set_spulist_filter_start(that.product.spulist_filter_start + that.product.spulist_filter_length);
          // 查询商品追加到页面
          that.appendSpuList();
        }

      }
    }
  }
</script>

<style>
  .spu-filter-name {
    width: 130px;
  }

  .spu-filter-group {
    width: 1000px;
  }

  .spu-filter-item.active,
  .spu-filter-item:hover {
    color: #e1251b;
  }
</style>
